<!-- 编辑模态框 -->
<div id="editModal" class="fixed inset-0 bg-black/50 z-50 hidden flex justify-center items-center">
    <div class="card p-6 w-1/2 max-w-2xl">
        <h2 class="text-xl font-bold mb-4">编辑用户信息</h2>
        <form id="editForm" method="post" class="space-y-4" action="UpdateUser.php">
            <input
                type="hidden"
                name="id"
                id="editId"
            >
            <input type="hidden" name="password_updated" id="passwordUpdated" value="0">
            <div>
                <label class="block text-sm font-medium text-gray-700">用户名</label>
                <input
                    type="text"
                    name="username"
                    id="editUsername"
                    class="mt-1 block w-full rounded-md border border-neutral-300 p-2 focus:border-primary focus:ring-primary"
                    required
                >
            </div>
            <div>
                <label class="block text-sm font-medium text-neutral-700">密码</label>
                <input
                    type="text"
                    name="password"
                    id="editPassword"
                    value="*******"
                    class="mt-1 block w-full rounded-md border border-neutral-300 p-2 focus:border-primary focus:ring-primary"
                    oninput="document.getElementById('passwordUpdated').value='1'"
                    required
                >
            </div>
            <div>
                <label class="block text-sm font-medium text-neutral-700">真实姓名</label>
                <input
                    type="text"
                    name="name"
                    id="editName"
                    class="mt-1 block w-full rounded-md border border-neutral-300 p-2 focus:border-primary focus:ring-primary"
                    required
                >
            </div>
            <div>
                <label class="block text-sm font-medium text-neutral-700">手机号</label>
                <input
                    type="text"
                    name="phone"
                    id="editPhone"
                    class="mt-1 block w-full rounded-md border border-neutral-300 p-2 focus:border-primary focus:ring-primary"
                >
            </div>
            <div>
                <label class="block text-sm font-medium text-neutral-700">邮箱</label>
                <input
                    type="text"
                    name="email"
                    id="editEmail"
                    class="mt-1 block w-full rounded-md border border-neutral-300 p-2 focus:border-primary focus:ring-primary"
                >
            </div>
            <div>
                <label class="block text-sm font-medium text-neutral-700">权限</label>
                <select id="editRole" name="role"
                class="mt-1 block w-full rounded-md border border-neutral-300 p-2 focus:border-primary focus:ring-primary">
                    <option value="0">读者</option>
                    <option value="1">管理员</option>
                </select>
            </div>
            <div class="flex gap-3">
                <button type="submit" class="btn-primary">保存修改</button>
                <button type="button" id="closeModal" class="btn-secondary">取消</button>
            </div>
        </form>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const editButtons = document.querySelectorAll('.edit-btn');
        const modal = document.getElementById('editModal');
        const closeBtn = document.getElementById('closeModal');

        // 点击编辑按钮：填充数据并显示模态框
        editButtons.forEach(btn => {
            btn.addEventListener('click', () => {
                // 从data属性读取图书信息
                const user = {
                    id: btn.dataset.id,
                    username: btn.dataset.username,
                    name: btn.dataset.name,
                    phone: btn.dataset.phone,
                    email: btn.dataset.email,
                    role: btn.dataset.role,
                };

                // 填充表单
                document.getElementById('editId').value=user.id;
                document.getElementById('editUsername').value = user.username;
                document.getElementById('editName').value = user.name;
                document.getElementById('editPhone').value = user.phone;
                document.getElementById('editEmail').value = user.email;
                document.getElementById('editRole').value = user.role;

                document.getElementById('passwordUpdated').value='0';
                modal.classList.remove('hidden'); // 显示模态框
            });
        });

        // 关闭模态框（按钮/背景）
        closeBtn.addEventListener('click', () => modal.classList.add('hidden'));
        modal.addEventListener('click', (e) => {
            if (e.target === modal) modal.classList.add('hidden'); // 点击背景关闭
        });
    });
</script>

